<template>
    <jb-crud-page
        ref="accountPage"
        title-icon="mdi:account-outline"
        title-text="七牛账号管理"
        search-url="/api/admin/qiniu/datas"
        :search-conditions="pageConditions"
        :edit-component="AccountEdit"
    >
        <template #conditions-form>
            <n-input
                v-model:value="pageConditions.keywords"
                type="text"
                placeholder="输入关键字搜索"
            />

            <jb-select
                v-model:value="pageConditions.type"
                url="/api/admin/dictionary/options?typeKey=qiniu_type"
                filterable
                class="w-130px"
                placeholder="=账号类型="
            >
            </jb-select>
            <jb-select
                v-model:value="pageConditions.isDefault"
                url="/api/admin/dictionary/options?typeKey=options_enable"
                filterable
                class="w-130px"
                placeholder="=是否默认="
            >
            </jb-select>
            <jb-select
                v-model:value="pageConditions.enable"
                url="/api/admin/dictionary/options?typeKey=options_enable"
                filterable
                class="w-130px"
                placeholder="=是否启用="
            >
            </jb-select>
        </template>
        <template #opt>
            <jb-btn
                :icon="Icons.ADD"
                ghost
                type="primary"
                @click="accountPage?.showEditModal('新增七牛账号')"
            >
                新增
            </jb-btn>
        </template>
        <template #default="{ state }">
            <vxe-table
                border
                :column-config="{ resizable: true }"
                height="auto"
                show-header-overflow
                show-overflow="tooltip"
                :seq-config="{ startIndex: state.tableStartIndex }"
                :row-config="{ isHover: true }"
                align="center"
                :data="state.list"
            >
                <jb-column type="seq" title="序号" width="60" fixed="left"></jb-column>
                <jb-column
                    field="name"
                    title="账号"
                    min-width="200"
                    fixed="left"
                ></jb-column>
                <jb-column
                    field="sn"
                    title="编号SN"
                    min-width="200"
                    fixed="left"
                ></jb-column>
                <jb-column field="type" title="账号类型" width="80">
                    <template #default="{ row }">
                        <n-tag :type="row.type == 1 ? 'success' : 'info'">{{
                            row?.type == 1 ? '个人' : '企业'
                        }}</n-tag>
                    </template>
                </jb-column>
                <jb-column field="ak" title="AK" min-width="360"></jb-column>
                <jb-column field="sk" title="SK" min-width="360"></jb-column>
                <jb-column field="bucketCount" title="Bucket个数" width="100">
                    <template #default="{ row }">
                        <jb-btn
                            type="info"
                            secondary
                            @click="
                                $router.push({
                                    name: PageNames.QINIU_BUCKET_MGR,
                                    query: { qiniuId: row.id }
                                })
                            "
                            >{{ row?.bucketCount }}</jb-btn
                        >
                    </template>
                </jb-column>
                <jb-column field="isDefault" title="是否默认" width="80">
                    <template #default="{ row }">
                        <jb-switch
                            v-model:value="row.isDefault"
                            :url="`/api/admin/qiniu/toggleIsDefault/${row.id}`"
                            field-name="isDefault"
                            @change="accountPage?.loadData()"
                        ></jb-switch>
                    </template>
                </jb-column>
                <jb-column field="enable" title="是否启用" width="80">
                    <template #default="{ row }">
                        <jb-switch
                            v-model:value="row.enable"
                            :url="`/api/admin/qiniu/toggleEnable/${row.id}`"
                        ></jb-switch>
                    </template>
                </jb-column>
                <jb-column title="备注" width="80">
                    <template #default="{ row }">
                        <jb-btn
                            tip-text="查看"
                            :icon="Icons.EYE"
                            quaternary
                            circle
                            modal-title="查看备注"
                            :modal-component="AccountRemark"
                            :modal-args="{ negativeText: '关闭' }"
                            :modal-component-props="{ remark: row.remark }"
                        ></jb-btn>
                    </template>
                </jb-column>
                <jb-column
                    field="createTime"
                    title="创建时间"
                    min-width="180"
                ></jb-column>
                <jb-column
                    field="updateTime"
                    title="更新时间"
                    min-width="180"
                ></jb-column>
                <jb-column
                    field="createUserName"
                    title="创建人"
                    min-width="120"
                ></jb-column>
                <jb-column
                    field="updateUserName"
                    title="更新人"
                    min-width="120"
                ></jb-column>

                <jb-column title="操作" width="110" fixed="right">
                    <template #default="{ row }">
                        <jb-btn
                            tip-text="编辑"
                            :icon="Icons.EDIT"
                            type="warning"
                            secondary
                            circle
                            @click="
                                accountPage?.showEditModal('编辑资源', {
                                    id: row.id
                                })
                            "
                        ></jb-btn>
                        <jb-btn
                            tip-text="删除"
                            :icon="Icons.DELETE"
                            secondary
                            type="error"
                            class="mx-8px"
                            circle
                            confirm-text="确定删除这条数据？"
                            :url="`/api/admin/qiniu/delete/${row.id}`"
                            @success="accountPage?.loadData()"
                        ></jb-btn>
                    </template>
                </jb-column>
            </vxe-table>
        </template>
    </jb-crud-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Icons } from '@/constants'
import JbCrudPage from '@/components/_builtin/jb-crud-page/index.vue'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import { PageNames } from '@/router/routes/pagenames'
import AccountRemark from './components/account-remark/index.vue'
import AccountEdit from './components/account-edit/index.vue'

const accountPage = ref<InstanceType<typeof JbCrudPage> | null>(null)

const pageConditions = useResetableData({
    keywords: '',
    type: '',
    isDefault: '',
    enable: ''
})
</script>

<style scoped></style>
